<script setup lang="ts">
import type { PropType } from 'vue'
import type { StorageSku, ProductResponse } from '@/pluginPackage/goods/commodityInfo/types'
import { debounce, throttle } from 'lodash'

const $props = defineProps({
  sku: {
    type: Array as PropType<StorageSku[]>,
    default() {
      return []
    },
  },
  info: {
    type: Object as PropType<ProductResponse>,
    default() {
      return {}
    },
  },
  skuConfig: {
    type: Object as PropType<{ currentSkuId: Long; isMainPic: boolean }>,
    default: () => ({}),
  },
})
const skuChooseScreenWidth = reactive({
  screenWidth: 0,
  index: -1,
  scrollLeft: 0,
})
const $emit = defineEmits(['skuImageChange'])

uni.getSystemInfo({
  success: (res) => {
    skuChooseScreenWidth.screenWidth = res.screenWidth
  },
})

// 立即执行的防抖
// const debounceClick = (e) => {
//     if (!e.target.dataset.item) {
//         return
//     }
//     const sku = e.target.dataset.item
//     const index = e.target.dataset.ind
//     handleSkusClick(sku, index)
// }
const debounceClick = throttle(
  (e) => {
    if (!e.target.dataset.item) {
      return
    }
    const sku = e.target.dataset.item
    const index = e.target.dataset.ind
    if (skuChooseScreenWidth.index === index) {
      return
    }
    handleSkusClick(sku, index)
  },
  200,
  {
    leading: false,
  },
)

const handleSkusClick = (sku: StorageSku, index: number) => {
  const windowWidth = skuChooseScreenWidth.screenWidth // 屏幕宽度
  //70=60图片宽度+10外边距
  let width = uni.upx2px(140) * index
  // 当大于屏幕一半的宽度则滚动，否则就设置位置为0（60为图片宽度）
  if (width > windowWidth / 2) {
    skuChooseScreenWidth.scrollLeft = width + uni.upx2px(120) / 2 - windowWidth / 2
  } else {
    skuChooseScreenWidth.scrollLeft = 0
  }
  skuChooseScreenWidth.index = index
  $emit('skuImageChange', sku, index)
}

watch(
  () => $props.skuConfig?.isMainPic,
  (val) => {
    if (val) {
      skuChooseScreenWidth.index = -1
    }
  },
  { immediate: true },
)

const skuConfigCompute = computed(() => ({
  currentSkuId: $props.skuConfig?.currentSkuId,
  skus: $props.sku,
  isMain: $props.skuConfig?.isMainPic,
}))

watch(
  () => skuConfigCompute.value,
  (val) => {
    if (val.currentSkuId && val.skus.length && !val.isMain) {
      skuChooseScreenWidth.index = $props.sku.findIndex((item) => item.id === val.currentSkuId)
    }
  },
  { immediate: true },
)
</script>

<template>
  <scroll-view
    v-if="$props.sku.length > 1"
    class="swiper-sku"
    scroll-x
    :scroll-left="skuChooseScreenWidth.scrollLeft"
    scroll-with-animation
    scroll-anchoring
    enable-passive
    enable-flex
  >
    <view style="display: flex" @click="debounceClick">
      <view
        class="swiper-sku__image"
        :class="{ 'active-sku': skuChooseScreenWidth.index === -1 }"
        :data-ind="-1"
        :data-item="sku?.[0]"
        :style="`background-image: url(${$props.info.pic})`"
      >
      </view>
      <view
        v-for="(item, ind) in $props.sku"
        :key="item.id"
        class="swiper-sku__image"
        :class="{ 'active-sku': ind === skuChooseScreenWidth.index }"
        :data-ind="ind"
        :data-item="item"
        :style="`background-image: url(${item.image})`"
      >
      </view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
@include b(swiper-sku) {
  padding: 10rpx 15rpx !important;
  white-space: nowrap;
  overflow-anchor: none;
  @include e(image) {
    display: inline-block;
    border-radius: 14rpx;
    overflow: hidden;
    flex-shrink: 0;
    width: 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
    border: 2px solid transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}
@include b(active-sku) {
  border-color: #e31436;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>
